
@import 'http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css';
/*
* @Author: Josh
* @Date:   2019-08-14 18:00:31
* @Last Modified by:   Administrator
* @Last Modified time: 2019-09-05 20:02:25
*/
/* 主文件 */
/* css reset */
/*
* @Author: Josh
* @Date:   2019-08-14 18:00:07
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 19:02:18
*/
/* 用于去除浏览器默认样式 */
/* 去掉所有元素的内外边距 */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, img,  ul, li, form, label, input,
table, tbody, tfoot, thead, tr, th, td,
audio, video {
    margin  : 0;
    padding : 0;
}
/* 统一全局字体 */
body {
    font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif
}
/* 列表元素去掉默认的列表样式 */
ol, ul {
    list-style: none;
}
/* Table元素的边框折叠 */
table {
    border-collapse : collapse;
    border-spacing  : 0;
}
/* 去掉默认的下划线 */
a {
    text-decoration: none;
}
/* 去掉input自带的边缘效果和背景颜色 */
input {
    outline     : none;
    background  : none;
}
/* 公共样式 */
/*
* @Author: Josh
* @Date:   2019-08-14 17:58:52
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 20:56:53
*/
/* 公共样式 */
/* 基准尺寸：20px  屏幕宽度 340px ~ 410px */
html {
    height   : 100%;
    font-size: 20px;
}
/* 基准尺寸：18px 屏幕宽度小于340px */
@media (max-width: 340px) {
    html {
        font-size: 18px;
    }
}
/* 基准尺寸：22px 屏幕宽度大于410px */
@media (min-width: 410px) {
    html {
        font-size: 22px;
    }
}
/* body默认样式 */
body {
    height                    : 100%;
    max-width                 : 640px;
    margin                    : 0 auto;
    background                : #f8f8f8;
    overflow                  : hidden;
    -webkit-overflow-scrolling: touch;/*让滚动元素具有弹性*/
}
/* 页面蒙版 */
.ju-mask {
    position  : fixed;
    top       : 0;
    bottom    : 0;
    left      : 0;
    right     : 0;
    background: rgba(0,0,0,.5);
    z-index   : 300;
}
/* 图标垂直方向振动动画 */
.fa-vibrate-y {
    -webkit-animation: fa-vibrate-y 1.5s infinite ease-in;
            animation: fa-vibrate-y 1.5s infinite ease-in;
}
/* 振动轨迹 */
@-webkit-keyframes fa-vibrate-y {
    0% {
        -webkit-transform: translateY(-10%);
                transform: translateY(-10%);
    }
    50% {
        -webkit-transform: translateY(10%);
                transform: translateY(10%);
    }
    100% {
        -webkit-transform: translateY(-10%);
                transform: translateY(-10%);
    }
}
@keyframes fa-vibrate-y {
    0% {
        -webkit-transform: translateY(-10%);
                transform: translateY(-10%);
    }
    50% {
        -webkit-transform: translateY(10%);
                transform: translateY(10%);
    }
    100% {
        -webkit-transform: translateY(-10%);
                transform: translateY(-10%);
    }
}
/* 字体图标 */
/*
* @Author: Josh
* @Date:   2019-08-14 20:19:01
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-14 22:25:55
*/
/* font-awesome字体图标 */
/* 图标默认样式 */
.fa {
  display       : inline-block;
  text-align    : center;
}
/* 标题栏 */
/*
* @Author: Josh
* @Date:   2019-08-14 21:35:49
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-15 00:13:46
*/
/*头部导航条*/
.ju-header {
    display      : -webkit-box;
    display      : flex;
    position     : fixed;
    -webkit-box-sizing   : border-box;
            box-sizing   : border-box;
    width        : 100%;
    max-width    : 640px;
    height       : 2.3rem;
    line-height  : 2.3rem;
    text-align   : center;
    top          : 0;
    z-index      : 200;
    border-bottom: 1px solid #ddd;
    background   : #f8f8f8;
}
/* 左侧功能区 */
.ju-header > .left {
    flex-basis : 3rem;
    text-align : center;
    flex-shrink: 0;
}
/* 中间标题区 */
.ju-header > .title {
    -webkit-box-flex    : 1;
            flex-grow    : 1;
    overflow     : hidden;
    white-space  : nowrap;/*文本不换行*/
    text-overflow: ellipsis;
}
/* 右侧功能区 */
.ju-header > .right {
    flex-basis : 3rem;
    flex-shrink: 0;
}
/* 内容区 */
/*
* @Author: Josh
* @Date:   2019-08-14 21:35:39
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-27 16:09:25
*/
/* 
*    若页面需要固定的导航、标题栏
*    并需要内容区自动做出适配
*    需要在结构上将导航、标题栏添加在内容区前面
*/
/*内容区*/
.ju-content {
    height    : 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position  : relative;
    overflow-y: auto;
}
/*根据是否有header和navbar自动适应内容区高度*/
.ju-header ~ .ju-content {
    padding-top   :2.3rem;
}
.ju-navbar ~ .ju-content {
    padding-bottom: 2.5rem;
}
/* 内容分区——Panel面板 */
/* Panel标题区 */
.ju-content .ju-panel-title {
    height      : 1.8rem;
    line-height : 1.8rem;
    padding-left: 1rem;
    color       : #aaa;
    background  : #fff;
    border-top  : 1px solid #eee;
    font-size   : 14px;
    font-weight : normal;
}
/* 标题导航 */
.ju-content .ju-panel-title > .ju-panel-link {
    float       : right;
    margin-right: 1rem;
    color       : #aaa;
}
/* Panel内容区 */
.ju-content .ju-panel-body {
    position     : relative;
    margin-bottom: .6rem;
    padding      : .6rem 1rem;
    background   : #fff;
    overflow     : hidden;
    border-top   : 1px solid #eee;
    border-bottom: 1px solid #eee;
}
/* 设置是否有内边距 */
.ju-content .ju-panel-body.no-padding {
    padding: 0;
}
/* 导航条 */
/*
* @Author: Josh
* @Date:   2019-08-14 21:35:58
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-15 00:14:29
*/
/*导航栏*/
.ju-navbar {
    display   : -webkit-box;
    display   : flex;
    position  : fixed;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    bottom    : 0;
    width     : 100%;
    max-width : 640px;
    height    : 2.5rem;
    border-top: 1px solid #ddd;
    z-index   : 200;
    background: #f8f8f8;
    text-align: center;
}
/*导航项目*/
.ju-navbar > .navbar-item {
    -webkit-box-flex : 1;
            flex : 1;
    color: #808080;
}
/*选中样式*/
.ju-navbar > .navbar-item.active {
    color: #09BB07;
}
/*导航图标*/
.ju-navbar > .navbar-item > .icon {
    padding  : .3rem 0 .1rem;
    font-size: 1.1rem;
}
/*导航名称*/
.ju-navbar > .navbar-item > .name {
    display  : block;
    font-size: .5rem;
}
/* 表单控件 */
/*
* @Author: Josh
* @Date:   2019-08-15 10:09:39
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-15 22:07:36
*/
/* 表单控件样式 */
/* 单行容器 */
.ju-form-item {
    display      : -webkit-box;
    display      : flex;
    position     : relative;
    padding-left : 1rem;
    border-bottom: 1px solid #eee;
}
/* 去掉最后一行的下边框 */
.ju-form-item:last-child {
    border-bottom: none;
}
/* 控件标签 */
.ju-form-item > .ju-form-label {
    display    : block;
    width      : 3.5rem;
    font-size  : .8rem;
    color      : #666;
    height     : 2rem;
    line-height: 2rem;
}
/* 控件内容区 */
.ju-form-item > .ju-form-body {
    -webkit-box-flex: 1;
            flex: 1;
}
/*内容区的输入框*/
.ju-form-item > .ju-form-body > .ju-input {
    width      : 100%;
    height     : 2rem;
    line-height: 2rem;
    font-size  : .8rem;
    border     : none;
}
/* 表单中的图标 */
.ju-form-item > .ju-form-body > .ju-input-icon {
    position     : absolute;
    width        : .8rem;
    height       : .8rem;
    line-height  : .8rem;
    top          : 50%;
    margin-top   : -.4rem;
    right        : 1rem;
    font-size    : .6rem;
    border-radius: 50%;
}
/*清空图标*/
.ju-form-item > .ju-form-body > .ju-input-icon.reset {
    background: #aaa;
    color     : #fff;
    display   : none;
}
/*控制清空图标的显示*/
.ju-form-item > .ju-form-body > .ju-input:valid + .ju-input-icon.reset {
    display: block;
}
/*错误提示图标*/
.ju-form-item > .ju-form-body > .ju-input-icon.warning {
    color : red;
    border: 1px solid red;
}
/*图标的隐藏*/
.ju-form-item > .ju-form-body > .ju-input-icon.hidden {
    display: none;
}
/* 自定义单选&多选 */
.ju-form-item > .ju-radio, .ju-form-item > .ju-check {
    -webkit-box-flex       : 1;
            flex       : 1;
    font-size  : .8rem;
    line-height: 2rem;
}
/* 隐藏radio&check类型的input */
.ju-form-item > .ju-radio > .ju-radio-input,
.ju-form-item > .ju-check > .ju-check-input {
    position: absolute;
    left    : -999rem;
}
/* 单选未选中状态图标 */
.ju-form-item > .ju-radio > .ju-radio-icon {
    margin-right: .5rem;
    color       : #09BB07;
    visibility  : hidden;
}
/* 单选选中状态图标 */
.ju-form-item > .ju-radio.checked > .ju-radio-icon {
    visibility: visible;
}
/* 多选未选中时的图标 */
.ju-form-item > .ju-check > .ju-check-icon {
    margin-right : .5rem;
    border       : 1px solid #ccc;
    border-radius: 50%;
    color        : rgba(0,0,0,0);
    font-size    : .6rem;
    width        : .8rem;
    height       : .8rem;
    line-height  : .8rem;
}
/* 多选选中时的图标 */
.ju-form-item > .ju-check.checked > .ju-check-icon {
    background  : #09BB07;
    color       : #fff;
    border-color: rgba(0,0,0,0);
}
/* 按钮 */
/*
* @Author: Josh
* @Date:   2019-08-15 14:47:53
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-15 15:17:43
*/
/* 按钮默认样式 */
.ju-btn {
    display      : block;
    position     : relative;
    width        : 10rem;
    margin       : 0 auto;
    padding      : .5rem 0;
    -webkit-box-sizing   : border-box;
            box-sizing   : border-box;
    border       : 1px solid #ccc;
    font-size    : .7rem;
    text-align   : center;
    color        : #000;
    border-radius: 5px;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    -webkit-user-select  : none;
       -moz-user-select  : none;
        -ms-user-select  : none;
            user-select  : none;/*文本不能被选择*/
}
/* 主操作按钮 */
.ju-btn.ju-btn-primary {
    background-color: #1AAD19;
    color           : #fff;
}
/* 警示类按钮 */
.ju-btn.ju-btn-warning {
    background-color: #E64340;
    color           : #fff;
}
/* 不可用按钮 */
.ju-btn.ju-btn-disabled {
    background-color: #F7F7F7;
    color           : #999;
    opacity         : .6;/*透明度*/
}
/* 大按钮 */
.ju-btn.ju-btn-large {
    width: 100%;
    font-size: .9rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
/* 小按钮 */
.ju-btn.ju-btn-small {
    display: inline-block;
    width: 3rem;
    padding: .2rem 0;
    font-size: .7rem;
}
/* 搜索框 */
/*
* @Author: Josh
* @Date:   2019-08-15 20:08:18
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-27 16:18:21
*/
/* 搜索框 */
.ju-search {
    max-width : 640px;
    margin    : 0 auto;
    background: #f8f8f8;
    z-index   : 110;
}
/* 搜索框输入状态，覆盖内容区 */
.ju-search.on-focus {
    position  : fixed;
    left      : 0;
    right     : 0;
    top       : 0;
    bottom    : 0;
    overflow-y: auto;
}
/* 有标题栏时 */
.ju-header ~ .ju-content .ju-search.onfocus {
    top: 2.3rem;
}
/* 有导航栏时 */
.ju-navbar ~ .ju-content .ju-search.on-focus {
    bottom: 2.5rem;
}
/* 搜索栏中的表单 */
.ju-search > .ju-search-form {
    display    : -webkit-box;
    display    : flex;
    height     : 2.3rem;
    -webkit-box-align: center;
            align-items: center;
}
/* 输入框容器 */
.ju-search  > .ju-search-form > .ju-search-input-wrap {
    -webkit-box-flex    : 1;
            flex    : 1;
    position: relative;
    padding : 0 .5rem;
}
/* 取消按钮 */
.ju-search > .ju-search-form > .ju-search-cancel {
    -webkit-box-flex         : 0;
            flex         : 0 0 2.2rem;
    padding-right: .5rem;
    text-align   : center;
    font-size    : .7rem;
    display      : none;
}
/* 对取消按钮进行控制 */
.ju-search.on-focus > .ju-search-form > .ju-search-cancel {
    display: block;
}
/* 搜索图标 */
.ju-search .ju-search-icon {
    position   : absolute;
    height     : .8rem;
    line-height: .8rem;
    font-size  : .8rem;
    top        : 0;
    bottom     : 0;
    left       : 1rem;
    margin     : auto;
    color      : #ccc;
}
/* 输入框 */
.ju-search .ju-search-input {
    -webkit-box-sizing   : border-box;
            box-sizing   : border-box;
    width        : 100%;
    height       : 1.6rem;
    border       : none;
    font-size    : .8rem;
    padding-left : 1.5rem;
    background   : #fff;
    border-radius: .2rem;
}
/* 清空按钮 */
.ju-search .ju-search-clear {
    position     : absolute;
    height       : .8rem;
    line-height  : .8rem;
    width        : .8rem;
    font-size    : .6rem;
    top          : 0;
    right        : 1rem;
    bottom       : 0;
    margin       : auto 0;
    border-radius: 50%;
    color        : #fff;
    background   : #ccc;
    display      : none;
}
/* 对清空按钮的控制 */
.ju-search .ju-search-input:valid + .ju-search-clear {
    display: block;
}
/* 搜索建议 */
.ju-search > .ju-search-suggest {
    display: none;
}
.ju-search.on-focus > .ju-search-suggest {
    display: block;
}
/* 搜索建议内容 */
.ju-search > .ju-search-suggest > .ju-suggest-item {
    padding-left : 1rem;
    height       : 2rem;
    line-height  : 2rem;
    font-size    : .8rem;
    background   : #fff;
    border-bottom: 1px solid #eee;
    color        : #333;
}
/* 列表 */
/*
* @Author: Josh
* @Date:   2019-08-16 11:39:23
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 18:32:42
*/
/* 列表样式 */
.ju-list > .ju-list-item {
    display      : -webkit-box;
    display      : flex;
    position     : relative;
    padding      : .5rem 1rem;
    font-size    : .8rem;
    background   : #fff;
    color        : #333;
    border-bottom: 1px solid #eee;
}
/* 竖直排列的列表项 */
.ju-list.row-2 {
    display  : -webkit-box;
    display  : flex;
    flex-wrap: wrap;
}
.ju-list.row-2 > .ju-list-item {
    -webkit-box-flex          : 1;
            flex          : 1 1 50%;
    -webkit-box-sizing    : border-box;
            box-sizing    : border-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    border-right  : 1px solid #eee;
}
.ju-list.row-2 > .ju-list-item:nth-child(2n){
    border-right: none;
}
/* 列表项的图片容器 */
.ju-list .item-img-wrap {
    -webkit-box-flex         : 0;
            flex         : 0 0 5rem;
    height       : 5rem;
    margin-right : .5rem;
    border-radius: .2rem;
    overflow     : hidden;
}
/* 列表项图片 */
.ju-list .item-img-wrap > .item-img {
    width : 100%;
    height: 100%;
}
/* 列表项文本区域 */
.ju-list .item-content-wrap {
    position       : relative;
    -webkit-box-flex           : 1;
            flex           : 1;
    display        : -webkit-box;
    display        : flex;
    -webkit-box-orient : vertical;
    -webkit-box-direction : normal;
            flex-direction : column;
    -webkit-box-pack: justify;
            justify-content: space-between;/*空余区域分布于元素之间*/
}
/* 列表项的标题 */
.ju-list .item-content-wrap > .item-title {
    height            : 2rem;
    line-height       : 1rem;/*两行文本*/
    font-size         : .8rem;
    font-weight       : normal;
    overflow          : hidden;
    /*多行折行截断*/
    display           : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 网格组件 */
/*
* @Author: Josh
* @Date:   2019-08-16 20:18:27
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-16 21:14:20
*/
/* 网格组件 */
.ju-grid {
    display   : -webkit-box;
    display   : flex;
    flex-wrap : wrap;
    border-top: 1px solid #ddd;
}
/* 网格中的格子 */
.ju-grid > .ju-grid-item {
    position     : relative;
    -webkit-box-flex         : 1;
            flex         : 1 1 33%;
    -webkit-box-sizing   : border-box;
            box-sizing   : border-box;
    padding      : 1.2rem 0;
    text-align   : center;
    border-right : 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background   : #fff;
}
/* 默认为三列 */
.ju-grid .ju-grid-item:nth-child(3n){
    border-right: none;
}
/* grid内容区 */
.ju-grid > .ju-grid-item > .ju-grid-icon {
    font-size    : 1.5rem;
    color        : #aaa;
    margin-bottom: .5rem;
}
.ju-grid > .ju-grid-item > .ju-grid-label {
    font-size: .6rem;
    color    : #333;
}
/* 两列网格 仅做宽度、内边距和边框的修改 */
.ju-grid.ju-grid-2 .ju-grid-item {
    border-right: 1px solid #ddd;
    flex-basis  : 50%;
    padding     : 1.8rem 0;
}
.ju-grid.ju-grid-2 .ju-grid-item:nth-child(2n) {
    border-right: none;
}
/* 四列网格 */
.ju-grid.ju-grid-4 .ju-grid-item {
    border-right: 1px solid #ddd;
    flex-basis  : 25%;
    padding     : .9rem 0;
}
.ju-grid.ju-grid-4 .ju-grid-item:nth-child(4n) {
    border-right: none;
}
/* 五列网格 */
.ju-grid.ju-grid-5 .ju-grid-item {
    border-right: 1px solid #ddd;
    flex-basis  : 20%;
    padding     : .6rem 0;
}
.ju-grid.ju-grid-5 .ju-grid-item:nth-child(5n) {
    border-right: none;
}
/* 取消边框 ！!需要置于n列网格样式之后 否则会因优先级被覆盖!! */
/*去除容器上边框*/
.ju-grid.no-border {
    border: none;
}
/*去除格子的右、下边框*/
.ju-grid.no-border > .ju-grid-item {
    border: none ;
}
/* 菜单组件 */
/*
* @Author: Josh
* @Date:   2019-08-16 21:27:16
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 00:00:08
*/
/* 菜单组件 */
.ju-menu > .ju-menu-item {
    display      : -webkit-box;
    display      : flex;
    height       : 2.3rem;
    padding      : 0 1rem;
    -webkit-box-align  : center;
            align-items  : center;
    border-bottom: 1px solid #eee;
    font-size    : .8rem;
}
/* 菜单名称 */
.ju-menu > .ju-menu-item > .ju-menu-name {
    -webkit-box-flex         : 1;
            flex         : 1;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    color        : #333;
}
/* 菜单信息 */
.ju-menu > .ju-menu-item > .ju-menu-value {
    max-width    : 5rem;
    height       : 1rem;
    line-height  : 1rem;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    color        : #999;
}
/* 下级操作引导图标 */
.ju-menu > .ju-menu-item > .ju-menu-icon {
    margin-left: .3rem;
    color      : #999;
}
/* 切换开关 */
.ju-menu > .ju-menu-item > .ju-switch {
    position                   : relative;
    -webkit-box-sizing                 : content-box;
            box-sizing                 : content-box;/*便于计算里面小圆直径*/
    width                      : 2.6rem;
    height                     : 1.4rem;
    border                     : 1px solid #ccc;
    outline                    : 0;
    border-radius              : .75rem;
    background-color           : rgba(0,0,0,0.1);
    -webkit-transition                 : background-color .3s, border .3s;
    transition                 : background-color .3s, border .3s;
    /*去掉webkit内核的默认样式*/
    -webkit-appearance         : none;
    /*去掉webkit的默认点击效果*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* 选中状态下 改变开关边框和颜色 */
.ju-menu > .ju-menu-item > .ju-switch:checked {
    border-color    : #07C160;
    background-color: #07C160;
}
/* 使用伪元素实现按钮 */
.ju-menu > .ju-menu-item > .ju-switch::after {
    content         : "";
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 1.4rem;
    height          : 1.4rem;
    border-radius   : .7rem;
    background-color: #FFF;
    -webkit-box-shadow      : 0 0 2px #999;
            box-shadow      : 0 0 2px #999;/*用于区分元素边界*/
    -webkit-transition      : left .3s;
    transition      : left .3s;
}
/*选中状态更改圆形按钮位置*/
.ju-menu > .ju-menu-item > .ju-switch:checked::after {
    left: 1.2rem;
}
/* 模态框 */
/*
* @Author: Josh
* @Date:   2019-08-17 10:30:34
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 11:47:54
*/
/* 模态框 */
.ju-modal {
    display: none;
}
/* 显示模态框 */
.ju-modal.show {
    display: block;
}
/* 模态框窗口容器 */
.ju-modal .ju-modal-wrap {
    position     : absolute;
    width        : 75%;
    max-width    : 480px;
    top          : 45%;
    -webkit-transform    : translateY(-50%);
            transform    : translateY(-50%);
    right        : 0;
    left         : 0;
    margin       : auto;
    background   : #fff;
    border-radius: .4rem;
    z-index      : 301;
}
/* 模态框内容区 */
.ju-modal .ju-modal-body {
    padding    : 1.8rem .8rem 1.5rem;
    text-align : center;
    font-size  : .8rem;
    line-height: 1.2rem;
    overflow   : hidden;
}
/* 模态框尾部 */
.ju-modal .ju-modal-footer {
    display   : -webkit-box;
    display   : flex;
    border-top: 1px solid #ddd;
}
/* 模态框尾部 按钮 */
.ju-modal .ju-modal-footer .ju-btn {
    border       : none;
    border-radius: 0;
    width        : 100%;
    font-size    : .8rem;
}
/* 按钮间的border */
.ju-modal .ju-modal-footer .ju-btn + .ju-btn {
    border-left: 1px solid #ddd;
}
/* 去除内容区内边距 */
.ju-modal .ju-modal-body.no-padding {
    padding: 0;
}
/* 图片形式的模态框样式 */
.ju-modal .ju-modal-body .ju-modal-img {
    display      : block;
    width        : 100%;
    border-radius: .3rem;
}
/* 图片模态框的关闭按钮 */
.ju-modal .ju-modal-close {
    position     : absolute;
    right        : 0;
    bottom       : -3rem;
    left         : 0;
    width        : 1.3rem;
    line-height  : 1.3rem;
    margin       : auto;
    text-align   : center;
    font-size    : .8rem;
    font-weight  : 100;
    color        : #eee;
    border       : 1px solid #eee;
    border-radius: 50%; 
}
/* 页面加载提示组件 */
/*
* @Author: Josh
* @Date:   2019-08-17 15:55:59
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 20:56:54
*/
/* 页面加载提示组件 */
.ju-loading {
    padding   : 1rem 0;
    text-align: center;
}
/* 提示组件图标 */
.ju-loading > .ju-loading-icon {
    font-size: 4.5rem;
    color    : rgba(0,0,0,0.05);
}
/* 页面加载提示信息 */
.ju-loading > .ju-loading-info {
    display   : block;
    margin-top: .6rem;
    font-size : .8rem;
    color     : #ccc;
}
/* 单行加载提示组件 */
.ju-loading-inline {
    margin    : 1.5rem auto 1rem;
    width     : 12.5rem;
    position  : relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
    color     : #999;
    height    : 1rem;
    border-top: 1px solid rgba(0,0,0,.1);
}
/* 单行加载组件文本 */
.ju-loading-inline > .ju-loading-info {
    display    : inline-block;
    padding    : 0 .5rem;
    position   : relative;
    top        : -.7rem;
    height     : 1rem;
    line-height: 1rem;
    font-size  : .7rem;
    background : #fff;
}
/* 单行加载组件图标 */
.ju-loading-inline > .ju-loading-info > .ju-loading-icon {
    color: rgba(0,0,0,.2);
}
/* Toast提示工具 */
/*
* @Author: Josh
* @Date:   2019-08-17 16:47:41
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 17:20:10
*/
/*
*    使用说明
*    为了实现该提示工具出场动画，改属性diaplay为属性opacity
*    使用步骤：
*    1、使用js动态添加组件到DOM树中（body节点下）
*    2、添加 ‘show’这个class以显示组件
*    3、当需取消该组件时，取除‘show’这个class，并在动画结束后移除改节点
*/
/* toash 提示工具 */
.ju-toast {
    position     : fixed;
    width        : 7rem;
    top          : 45%;
    -webkit-transform    : translateY(-40%);
            transform    : translateY(-40%);
    right        : 0;
    left         : 0;
    margin       : auto;
    padding      : 1rem 0;
    opacity      : 0; /*透明级别：完全透明*/
    color        : #fff;
    text-align   : center;
    background   : rgba(0,0,0,.6);
    border-radius: .4rem;
    -webkit-transition   : opacity .3s, -webkit-transform .3s;
    transition   : opacity .3s, -webkit-transform .3s;
    transition   : transform .3s, opacity .3s;
    transition   : transform .3s, opacity .3s, -webkit-transform .3s;
    z-index      : 301;
}
/* 显示Toash组件 */
.ju-toast.show {
    opacity  : 1;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
/* Tosh组件图标 */
.ju-toast > .ju-toast-icon {
    font-size: 2.2rem;
}
/* Tosh组件文本 */
.ju-toast > .ju-toast-info {
    margin-top: .5rem;
    font-size : .7rem;
}
/* ActionSheet可选菜单 */
/*
* @Author: Josh
* @Date:   2019-08-17 18:09:58
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-27 14:34:00
*/
/* 弹出菜单,默认隐藏在屏幕下方 */
.ju-action-sheet > .ju-action-sheet-wrap {
    position  : fixed;
    right     : 0;
    bottom    : 0;
    left      : 0;
    max-width : 640px;
    margin    : auto;
    background: #eee;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    -webkit-transform : translateY(100%);
            transform : translateY(100%);
    z-index   : 301;
}
/* 菜单弹出 */
.ju-action-sheet.show .ju-action-sheet-wrap {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
/* 蒙版 */
/*
    蒙版需一直挂载在dom树body节点下 
    通过opacity:0设置元素不可见
    pointer-events:none，取消模板默认点击效果，让下方组件可以透过蒙版被点击;
*/
.ju-action-sheet > .ju-mask {
    opacity       : 0;
    pointer-events: none;
    -webkit-transition    : opacity .3s ease;
    transition    : opacity .3s ease;
}
/* 菜单弹出时蒙版 */
.ju-action-sheet.show > .ju-mask {
    opacity       : 1;
    pointer-events: auto;
}
/* 弹出菜单头部 */
.ju-action-sheet .ju-action-sheet-header {
    padding    : 0 2rem;
    display    : -webkit-box;
    display    : flex;
    -webkit-box-align: center;
            align-items: center;
    text-align : center;
    height     : 3rem;
    background : #fff;
}
/* 弹出菜单头部标题 */
.ju-action-sheet .ju-action-sheet-header > .ju-action-sheet-title {
    -webkit-box-flex              : 1;
            flex              : 1;
    font-size         : .7rem;
    line-height       : 1rem;
    font-weight       : normal;
    color             : rgba(0,0,0,.3);
    overflow          : hidden;
    /*多行折行截断*/
    display           : -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
/* 菜单中间内容区 */
.ju-action-sheet .ju-action-sheet-body {
    border-top: 1px solid rgba(0,0,0,.1);
    background: #fff;
}
/* 菜单尾部，通常为取消按钮 */
.ju-action-sheet .ju-action-sheet-footer {
    margin-top: .3rem;
    background: #fff;
}
/* 每个菜单项 */
.ju-action-sheet .ju-action-sheet-menu {
    display    : block;
    height     : 2.8rem;
    line-height: 2.8rem;
    font-size  : .8rem;
    text-align : center;
}
/* 菜单项边框控制 */
.ju-action-sheet .ju-action-sheet-menu + .ju-action-sheet-menu {
    border-top: 1px solid rgba(0,0,0,.1);
}
/* 文章组件 */
/*
* @Author: Josh
* @Date:   2019-08-17 20:58:18
* @Last Modified by:   Administrator
* @Last Modified time: 2019-09-05 16:31:14
*/
/* 文章组件 */
.ju-article {
    position     : relative;
    padding      : 1rem;
    margin-bottom: 1rem;
    font-size    : .8rem;
    line-height  : 1.6rem;
    background   : #fff;
    border-bottom: 1px solid #eee;
    color        : #333;
}
/* 文章被折叠的情况 */
.ju-article.fold {
    max-height: 100%;
    overflow  : hidden;
}
/* 展开按钮 */
.ju-article .ju-article-unfold-btn {
    display    : none;
    position   : absolute;
    -webkit-box-sizing : border-box;
            box-sizing : border-box;
    right      : 0;
    bottom     : 0;
    left       : 0;
    height     : 5rem;
    padding-top: 3rem;
    text-align : center;
    font-size  : 1.5rem;
    color      : #e0652f;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0)), to(#fff));
    background : linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 100%);
}
/* 显示展开按钮 */
.ju-article.fold .ju-article-unfold-btn {
    display: block;
}
/* 文章大标题 */
.ju-article .ju-article-title {
    margin     : .5rem 0 1rem;
    font-size  : 1.4rem;
    line-height: 2rem;
}
/* 文章信息（作者、创作时间） */
.ju-article .ju-article-info {
    font-size: .8rem;
    color    : #aaa;
}
/* 文章小标题 */
.ju-article .ju-article-subtitle {
    font-size : 1.1rem;
    margin-top: 1rem;
}
/* 文章段落 */
.ju-article .ju-article-paragraph {
    margin: .5rem 0 1rem;
}
/* 文章图片 */
.ju-article .ju-article-img {
    display: block;
    max-width: 100%;
    margin   : auto;
}